<%--
    Document   : registry-page
    Created on : 23-Jul-2013, 15:14:48
    Author     : Minh Quyen
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
        <link href="bootstrap/css/bootstrap-responsive.min.css" />
        <style>
            #captcha
            {
                height:38px;
                background-image:url(captcha.gif);
                background-repeat:no-repeat;
                font-size:25px;
                position:relative;
            }
            #captcha_gen
            {
                left:10px;
                top:3px;
                position:absolute;
                Font-family:Monospace;
                font-weight:bold;
                text-align:justify;
            }
            body{
                color: white;
                background-image: url(images2/gallery.jpg);
                /*        background-repeat: repeat;*/
                background-color: black;
            }
            .container[role="main"] {
                padding-bottom: 60px;
            }
            .bottombar {
                /*        position: fixed;*/
                bottom: 0;
                left: 0;
                right: 0;
            }
        </style>
        <title>LAFITTE|REGISTRY</title>
        <link rel="shortcut icon" href="./images2/logo.jpg">

        <script src="datetimepicker_css.js"></script>
        <script language="javascript" type="text/javascript">
            function getCaptcha() {
                var chars = "0Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0Kk1Ll2Mm3Nn4Oo5Pp6Qq7Rr8Ss9Tt0Uu1Vv2Ww3Xx4Yy5Zz";
                var string_length = 5;
                var captchastring = '';
                for (var i=0; i<string_length; i++) {
                    var rnum = Math.floor(Math.random() * chars.length);
                    captchastring += chars.substring(rnum,rnum+1);
                }
                document.getElementById("randomfield").innerHTML = captchastring;
            }
            function myFunction(code)
            {
                x=document.getElementById("randomfield");
                y=code.value;
                var z;
                z=(x.innerHTML==y)?'Correct':'Incorrect';
                document.getElementById("alert").innerHTML=z;
                document.getElementById("alertT").value=z;
            }

            function validateUsername(username){
                if(username.value.length==0){
                    document.getElementById("userError").innerHTML='Username is required!';
                    return false;
                }else if (username.value.length >=30) {
                    document.getElementById("userError").innerHTML='Password is too long!';
                    return false;
                }
                document.getElementById("userError").innerHTML='';
                return true;
            }

            function valiNum(tele){
                var reg = /^\d+$/
                if(tele.value.length == 0){
                    return true;
                }else if (reg.test(tele.value) == false)
                {
                    alert('Only numbers are accepted!');
                    return false;
                }
                return true;
            }

            function valiTele(tele){
                var reg1 = /^09([0-9]{8})$/;
                var reg2 = /^01([0-9]{9})$/;

                if(tele.value.length == 0){
                    document.getElementById("teError").innerHTML='';
                    return true;
                }else if (reg1.test(tele.value) == false && reg2.test(tele.value) == false){
                    document.getElementById("teError").innerHTML='Invalid telephone number!';
                    return false;
                }
                document.getElementById("teError").innerHTML='';
                return true;
            }

            function valiID(tele){
                var reg = /^\d{9}$/;

                if(tele.value.length == 0){
                    document.getElementById("idError").innerHTML='Identity number is required!';
                    return false;
                }else if (reg.test(tele.value) == false){
                    document.getElementById("idError").innerHTML='Invalid identity number!';
                    return false;
                }
                document.getElementById("idError").innerHTML='';
                return true;
            }

            function valiOld(oldPass){
                if (oldPass.value.length == 0) {
                    document.getElementById("oldError").innerHTML='Password is required!';
                    return false;
                }else if (oldPass.value.length >=30) {
                    document.getElementById("oldError").innerHTML='Password is too long!';
                    return false;
                }
                document.getElementById("oldError").innerHTML='';
                return true;
            }

            function valiCon(conPass){
                var n=document.getElementById("newPass").value;
                if(conPass.value != n){
                    document.getElementById("conError").innerHTML='Confirm password does not match password!';
                    return false;
                }
                if (conPass.value.length == 0) {
                    document.getElementById("conError").innerHTML='Confirm password is required!';
                    return false;
                }
                document.getElementById("conError").innerHTML='';
                return true;
            }

            function valiFull(name){
                if(name.value.length==0){
                    document.getElementById("nameError").innerHTML='Full name is required!';
                    return false;
                }
                document.getElementById("nameError").innerHTML='';
                return true;
            }

            function valiBacc(name){
                if(name.value.length==0){
                    document.getElementById("baccError").innerHTML='Bank account is required!';
                    return false;
                }
                document.getElementById("baccError").innerHTML='';
                return true;
            }

            function valiBName(name){
                if(name.value.length==0){
                    document.getElementById("bNameError").innerHTML='Bank name is required!';
                    return false;
                }
                document.getElementById("bNameError").innerHTML='';
                return true;
            }

            function validateEmail(emailField){
                var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

                if(emailField.value.length==0){
                    document.getElementById("emailError").innerHTML='Email is required!';
                    return false;
                }else if (reg.test(emailField.value) == false)
                {
                    document.getElementById("emailError").innerHTML='Invalid email!';
                    return false;
                }

                document.getElementById("emailError").innerHTML='';
                return true;

            }
        </script>
    </head>
    <body onload="getCaptcha();">
        <div align="center">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span4"></div>
                    <div class="span6" align="left">
                        <jsp:include page="menubar.jsp"/>
                    </div>
                    <div class="span2"></div>
                </div>
            </div>
        </div>
        <div align="center">
            <h1 class="" align="center" style="color: white"><font face="Algerian">Registry</font> </h1>
            <form action="Controller" method="POST">
                <table class="table">
                    <tr>
                        <!--username-->
                        <td style="color: white"><b>Username:<span style="color: red">*</span></b></td>
                        <td><input type="text" name="txtUsername" value="${param.txtUsername}" onblur="validateUsername(this);"/></td>
                        <td><label id="userError" style="color: red">
                                <c:if test="${not empty MESSUSER}">
                                    ${MESSUSER}
                                </c:if>
                            </label></td>

                        <!--telephone number-->
                        <td style="color: white"><b>Telephone number:</b></td>
                        <td><input type="text" name="txtTelephone" value="${param.txtTelephone}"
                                   onblur="valiTele(this);" onkeyup="valiNum(this);"/>
                        </td>
                        <td><label style="color: red" id="teError"></label></td>
                    </tr>
                    <tr>
                        <!--password-->
                        <td style="color: white"><b>Password:<span style="color: red">*</span></b></td>
                        <td><input type="password" name="txtPassword" value="${param.txtPassword}" onblur="valiOld(this);"
                                   id="newPass"/></td>
                        <td><label style="color: red" id="oldError">
                                <c:if test="${not empty MESSPASS}">
                                    ${MESSPASS}
                                </c:if>
                            </label></td>


                        <td style="color: white"><b>Home address:</b></td>
                        <td><input type="text" name="txtAddress" value="${param.txtAddress}" /></td>
                        <td><input type="hidden" name="" value="" /></td>
                    </tr>
                    <tr>
                        <!--confirm password-->
                        <td style="color: white"><b>Confirm password:<span style="color: red">*</span></b></td>
                        <td><input type="password" name="txtconPassword" value="${param.txtconPassword}" onblur="valiCon(this);"/></td>
                        <td><label style="color: red" id="conError">
                                <c:if test="${not empty MESSCNP}">
                                    ${MESSCNP}
                                </c:if>
                            </label></td>

                        <!--ID-->
                        <td style="color: white"><b>ID card number:<span style="color: red">*</span></b></td>
                        <td><input type="text" name="txtIdentity" value="${param.txtIdentity}"
                                   onblur="valiID(this);" onkeyup="valiNum(this);"/>
                        </td>
                        <td><label style="color: red" id="idError">
                                <c:if test="${not empty MESSID}">
                                    ${MESSID}
                                </c:if>
                            </label></td>
                    </tr>

                    <!--fullname & bank account-->
                    <tr>
                        <td style="color: white"><b>Full name:<span style="color: red">*</span></b></td>
                        <td><input type="text" name="txtFullname" value="${param.txtFullname}" onblur="valiFull(this);"/></td>
                        <td><label style="color: red" id="nameError">
                                <c:if test="${not empty MESSFULL}">
                                    ${MESSFULL}
                                </c:if>
                            </label></td>

                        <td style="color: white"><b>Bank account:<span style="color: red">*</span></b></td>
                        <td><input type="text" name="txtBankAccount" value="${param.txtBankAccount}"
                                   onblur="valiBacc(this);" onkeyup="valiNum(this);"/>
                        </td>
                        <td><label style="color: red" id="baccError">
                                <c:if test="${not empty MESSBACC}">
                                    ${MESSBACC}
                                </c:if>
                            </label></td>
                    </tr>

                    <!--gender & bank name-->
                    <tr>
                        <td style="color: white"><b>Gender:</b></td>
                        <td>
                            <select name="ddlGender">
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </td>
                        <td><input type="hidden" name="" value="" /></td>

                        <td style="color: white"><b>Bank name:<span style="color: red">*</span></b></td>
                        <td><input type="text" name="txtBankName" value="${param.txtBankName}" onblur="valiBName(this);"/></td>
                        <td><label style="color: red" id="bNameError">
                                <c:if test="${not empty MESSBANAME}">
                                    ${MESSBANAME}
                                </c:if>
                            </label></td>
                    </tr>

                    <!--email & verification-->
                    <tr>
                        <td style="color: white"><b>E-mail address:<span style="color: red">*</span></b></td>
                        <td><input type="text" name="txtEmail" value="${param.txtEmail}" onblur="validateEmail(this);"/></td>
                        <td><label style="color: red" id="emailError">
                                <c:if test="${not empty MESSEMAIL}">
                                    ${MESSEMAIL}
                                </c:if>
                            </label></td>

                        <td style="color: white"><b>Please enter following verification code:<span style="color: red">*</span></b></td>
                        <td><input type="text" value="" onkeyup="myFunction(this);" name="txtVer"/></td>
                        <td>
                            <label style="color: red" id="alert">
                                <c:if test="${not empty MESSVER}">
                                    ${MESSVER}
                                </c:if>
                            </label>
                        </td>
                    </tr>

                    <!--job & captcha-->
                    <tr>
                        <td style="color: white"><b>Occupation:</b></td>
                        <td><input type="text" name="txtJob" value="${param.txtJob}" /> </td>
                        <td><input type="hidden" name="" value="" /></td>

                        <td></td>
                        <td colspan="">
                            <div id="captcha">
                                <div id="captcha_gen">
                                    <div class="row-fluid">
                                        <div class="span8">
                                            <label align="center" id="randomfield" style="color: red" class="alert-info" >
                                            </label>
                                        </div>
                                        <div class="span2">
                                            <a href="" class="btn btn-inverse"><i class="icon-refresh icon-white" onclick="getCaptcha()"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <!--address-->
                    <tr>
                        <!--date of birth-->
                        <td style="color: white">Date of birth:<span style="color: red">*</span></td>
                        <td style="color: white"><input type="text" name="txtDate" value="${param.txtDate}" id="demo1" readonly="readonly"/>
                            <img alt="" src="images2/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>
                        </td>
                        <td><label style="color: red" id="alert">
                                <c:if test="${not empty MESSDOB}">
                                    ${MESSDOB}
                                </c:if>
                            </label></td>
                        <td>
                            <input type="submit" class="btn btn-inverse" value="Register" name="btAction" />
                            <input type="reset" value="Reset" class="btn btn-inverse"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="bottombar">
            <div class="bottom-inner">
                <div class="container">
                    <jsp:include page="footer.jsp" flush="" />
                </div>
            </div>
        </div>
    </body>
</html>
